<template>
  <div>
    <!-- 正确使用 SVG 图标 -->
    <!-- 假设您有一个 dog.svg 文件在 src/assets/icons/ 目录下 -->
    <!-- <svg-icon name="dog" class="custom-icon" color="red" /> -->

    <!-- 或者使用原生方式 -->
    <svg :style="svgStyle">
      <use :xlink:href="symbolId" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  const props = withDefaults(
    defineProps<{
      name: string
      prefix?: string
      color?: string
      width?: string | number
      height?: string | number
    }>(),
    {
      prefix: '#icon-',
      color: 'red',
      width: 24,
      height: 24,
    },
  )

  //计算属性生成symbolId
  const symbolId = computed(() => `${props.prefix}${props.name}`)

  //计算样式
  const svgStyle = computed(() => ({
    width: typeof props.width === 'number' ? `${props.width}px` : props.width,
    height:
      typeof props.height === 'number' ? `${props.height}px` : props.height,
  }))
</script>

<style scoped></style>
